/** @jsxImportSource @emotion/react */
import { jsx } from '@emotion/react';
import { useEffect, useState } from "react";
import React from 'react';
import { Form, Input, Select } from "antd";
import { Project } from "../../types/Project";
import { UserSelect } from 'components/user-select';
import { User } from '../../types/User';

interface SearchPanelProps {
  users: User[],
  param: Partial<Pick<Project, 'name' | 'personId'>>,
  setParam: (param: SearchPanelProps['param']) => void;
}

export const SearchPanel = ({ users, param, setParam }: SearchPanelProps) => {




  return <Form css={{ marginBottom: '2rem' }} layout={"inline"}>
    <Form.Item>
      <Input type="text" value={param.name}
        placeholder={'项目名'}
        onChange={evt => setParam({
          ...param,
          name: evt.target.value
        })}
      />

    </Form.Item>
    <Form.Item>
      <UserSelect
        defaultOptionName={'负责人'}
        value={param.personId}
        onChange={(value) => 
          setParam({
            ...param,
            personId: value
        })} />

    </Form.Item>
  </Form>
}